<template>
    <div class="row tree-container">
        <div class="col-sm-6">
            <div class="widget-box">
                <div class="widget-header header-color-blue2" style="height: 40px">
                    <!--<h4 class="lighter smaller">IFC标准树</h4>-->
                    <div class="check-tree" id="ifc-tree_select" @click="show=true">IFC标准树</div>
                    <div class="check-tree" id="model-tree_select" @click="show=false">MODEL树</div>
                </div>
                <div class="widget-body" id="tree-container">
                    <div class="widget-main padding-8">
                        <div id="IFC-TREE" class="tree tree-selectable" v-show="show">

                        </div>
                        <div id="MODEL-TREE" class="tree tree-selectable" v-show="!show">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import TreeDataSource from './TreeDataSource';
    import TreeView from './TreeView';
    import * as $ from 'jquery';
    window.jQuery = window.$ = $;
    require('./js/bootstrap.min')
    require('./js/ace.min');
    /**
     * created组件方法没有执行？？？？？？尚待解决，将下面代码移入到created方法中
     */
    //初始化左侧IFC树高度
    export default {
        name: "ifc-tree-view",
       props:["currentTool"],
        data:function () {
            return {
                storeyDatas:null,
                show:""
            }
        },
        watch:{
            show:function (newShow,oldShow) {
                if(newShow){
                    $("#ifc-tree_select").addClass("select-tree_style");
                    $("#model-tree_select").removeClass("select-tree_style")
                }else{
                    $("#model-tree_select").addClass("select-tree_style");
                    $("#ifc-tree_select").removeClass("select-tree_style")
                }
                console.log(newShow,oldShow)
            },
            currentTool:{
                handler(newValue, oldValue) {
                },
                deep: true
            }
        },
        methods:{
            buildTreeView:function(){
                //IFC标准树
                this.show = true;
                var ifcTreeDataSource = new TreeDataSource({src:"models/gltf/houseDemo1213.xml",treeType:"IFCTREE"});
                //获取各楼层组件集合
                GOLOAlBAL_OPEOBJ.storeyDatas = ifcTreeDataSource.getStoreyDatas();
                var ifcTreeView = new TreeView({
                    treeContainer:document.getElementById("IFC-TREE"),
                    dataSource: ifcTreeDataSource,
                    multiSelect: true,
                    loadingHTML: '<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
                    'open-icon': 'icon-minus',
                    'close-icon': 'icon-plus',
                    'selectable': true,
                    'selected-icon': 'icon-ok',
                    'unselected-icon': 'icon-remove'
                });
                //注册回调函数，响应每一次点击事件，获取当前数据
                ifcTreeView.registorApi("handleItemClick",function (data) {
                    if(data.curOperateComponentInfo.selected){
                        var mesh = GOLOAlBAL_OPEOBJ.bimModel.objects[data.curOperateComponentInfo.guid];
                        mesh.highlighted = true;
                        GOLOAlBAL_OPEOBJ.cameraFlight.flyTo(mesh);
                    }else {
                        GOLOAlBAL_OPEOBJ.bimModel.objects[data.curOperateComponentInfo.guid].highlighted = false;
                    }
                });
                ifcTreeView.registorApi("handleFolderClick",function (data) {
                    var deSelectedComponents = data.deSelectedComponents;
                    var selectedComponents = data.selectedComponents;
                    for(var i = 0; i < deSelectedComponents.length; i ++){
                        GOLOAlBAL_OPEOBJ.bimModel.objects[deSelectedComponents[i].guid].highlighted = false;
                    }
                    for(var i = 0; i < selectedComponents.length; i ++){
                        GOLOAlBAL_OPEOBJ.bimModel.objects[selectedComponents[i].guid].highlighted = true;
                    }
                    GOLOAlBAL_OPEOBJ.cameraFlight.flyTo(GOLOAlBAL_OPEOBJ.bimModel);
                });
                //模型树
                var modelTreeDataSource = new TreeDataSource({src:"models/gltf/houseDemo1213.xml",treeType:"MODELTREE"});
                //获取各楼层组件集合
                var modelTreeView = new TreeView({
                    treeContainer:document.getElementById("MODEL-TREE"),
                    dataSource: modelTreeDataSource,
                    multiSelect: true,
                    loadingHTML: '<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
                    'open-icon': 'icon-minus',
                    'close-icon': 'icon-plus',
                    'selectable': true,
                    'selected-icon': 'icon-ok',
                    'unselected-icon': 'icon-remove'
                });
                //注册回调函数，响应每一次点击事件，获取当前数据
                modelTreeView.registorApi("handleItemClick",function (data) {
                    if(data.curOperateComponentInfo.selected){
                        var mesh = GOLOAlBAL_OPEOBJ.bimModel.objects[data.curOperateComponentInfo.guid];
                        mesh.highlighted = true;
                        GOLOAlBAL_OPEOBJ.cameraFlight.flyTo(mesh);
                    }else {
                        GOLOAlBAL_OPEOBJ.bimModel.objects[data.curOperateComponentInfo.guid].highlighted = false;
                    }
                });
                modelTreeView.registorApi("handleFolderClick",function (data) {
                    var deSelectedComponents = data.deSelectedComponents;
                    var selectedComponents = data.selectedComponents;
                    for(var i = 0; i < deSelectedComponents.length; i ++){
                        GOLOAlBAL_OPEOBJ.bimModel.objects[deSelectedComponents[i].guid].highlighted = false;
                    }
                    for(var i = 0; i < selectedComponents.length; i ++){
                        GOLOAlBAL_OPEOBJ.bimModel.objects[selectedComponents[i].guid].highlighted = true;
                    }
                    GOLOAlBAL_OPEOBJ.cameraFlight.flyTo(GOLOAlBAL_OPEOBJ.bimModel);
                });
            },
        },
        mounted(){
            this.buildTreeView();
        },
        created(){
        }
    }
</script>

<style scoped>
    /*@import语法有性能问题，更好的方式？------》》》？？？？*/
    @import './css/font-awesome.min.css';
    @import './css/ace.min.css';
    @import './css/tree-view.css';
    .check-tree{
        position: relative;
        display: inline-block;
        width: 50%;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
    }
    .check-tree:hover{
        background-color: #5fa6d3;
    }
</style>